/******************** 
	作用:添加图文回复
	作者:蔡俊雄
	版本:V1.0
	时间:2015-07-30
	修改:2015-07-31
	修改:2015-08-12至2015-08-13(说明:按飞哥要求修改成采用ajax提交的方式)
	修改:2015-08-15(说明:按陈总要求修改json格式的键名,并添加全功能的编辑器)
********************/

$(function() {
	var idList = [0]; //保存当前编辑区域相对应的id号,0表示主图
	var editorList = []; //编辑器
	//	window.editorLists = editorList; //用于提交时的数据同步
	var currentEditId = 0; //当前编辑区域的ID
	var maxId = 0; //最大的ID

	//-----------------上传图片设置-----------------
	//编辑器设置
	var uploadEditor = KindEditor.editor({
		uploadJson: '/Foundation/ImageTextReply?isUpfile=1',
		allowFileManager: false
	});
	//显示图片上传对话框
	function showImageUploadDialog(imageId, hiddenId, editImageId) {
		uploadEditor.loadPlugin('image', function() {
			uploadEditor.plugin.imageDialog({
				showRemote: false,
				imageUrl: $(hiddenId).val(),
				clickFn: function(url, title, width, height, border, align) {
					$(hiddenId).val(url);
					showPreviewImage(imageId, editImageId, url);
					uploadEditor.hideDialog();
				}
			});
		});
	};
	//显示预览图
	function showPreviewImage(imageId, editImageId, url) {
		$(imageId).attr("src", url);
		$(editImageId).attr("src", url);
	};

	function initImageUploadDialog(btnId, imageId, hiddenId, editImageId) {
		$(btnId).on("click", function(e) {
			showImageUploadDialog(imageId, hiddenId, editImageId);
		});
	};
	//-----------------保存当前编辑数据为字符串-----------------
	//点击"提交"按钮
	$("#submitBtn").on("click", function(e) {
//		General.stopEvent(e);
		serializeData();
//		alert($("#content").val());
	});
	//序列化数据

	function serializeData() {
		var data = [];
		var obj;
		var container;
		//同步编辑器数据
		$.each(editorList, function(index, editor) {
			try {
				editor.sync();
			} catch (e) {

			}
		});
		$("#editContainer").children(".panel").each(function(index, element) {
			var id = idList[index];
			obj = {};
			obj["title"] = $(this).find("#title" + id).val();
			obj["author"] = $(this).find("#author" + id).val();
			obj["picurl"] = $(this).find("#picurl" + id).val();
			obj["cover"] = $(this).find("#cover" + id).prop("checked");
			obj["url"] = $(this).find("#url" + id).val();
			obj["description"] = $(this).find("#description" + id).val();
			obj["content"] = $(this).find("#contentBody" + id).val();
			data.push(obj);
		});
//		data = JSON.stringify(data);
		//
		/*data=data.replace(/\\"/g,General.specialString);
		data=data.replace(/"/g,"\\\"");
		var reg=new RegExp(General.specialString);
		reg.global=true;
		data=data.replace(reg,'\\\\\"');
		console.log(data);*/
//		General.specialString
		
//		window.dataContent=data;
		data = JSON.stringify(data);
		$("#content").val(data);
		//alert($("#content").val());
	};
	window.serializeData = serializeData;

	init(); //初始化

	/**
	 * 初始化
	 */
	function init() {
		initList(); //初始化列表
//		syncList(); //同步列表数据
		//标题变化时同时更新左边标题
		$("#addSub").on("click", function(e, previous) {
			General.stopEvent(e);
			startAddSubList();
		});
		//判断是否需要提示
		var tipsStr=$("#tips").val();
		if(tipsStr!=""){
			General.alert(tipsStr);
		}
	};
	/**
	 * 同步列表数据
	 */
	function syncList() {
		var data = $("#content").val();
		if (data) {
			try {
				data = $.parseJSON(data);
			} catch (e) {
				data = [];
			}
		} else {
			data = [];
		}
		//添加相应的编辑区域
		for (var i = 0; i < data.length - 1; i++) {
			startAddSubList(true);
		}
		//同步数据
		$("#editContainer").children(".panel").each(function(index, element) {
			//			console.log(index>=data.length-1);
			if (data.length == 0 || index > data.length - 1) {
				return false;
			}
			var obj = data[index];
			var id = $(this).attr("data-id");
			$(this).find("#title" + id).val(obj["title"]);
			syncTitle(id); //同步标题
			$(this).find("#author" + id).val(obj["author"]);
			$(this).find("#picurl" + id).val(obj["picurl"]).blur();
			$(this).find("#cover" + id).prop("checked", obj["cover"]);
			$(this).find("#url" + id).val(obj["url"]);
			$(this).find("#description" + id).val(obj["description"]);
			//			$(this).find("#contentBody" + id).val(obj["content"]);
			editorList[index].html(obj["content"]);
		});
	};
	/**
	 * 初始化列表
	 */
	function initList() {
		idList = [];
		//查找有多少个编辑窗口
		$("#editContainer").children(".panel").each(function(index, element) {
			idList.push(index);
			maxId = index; //最大的ID;
			if (index == 0) {
				$(this).attr("data-id", index);
			} else {
				$(this).attr("data-id", index).addClass("hide");
				$("#subList").children("li:eq(" + (index - 1) + ")").attr("data-id", index);
			}
			bindEdit(index); //绑定编辑列表对应的操作
		});
		saveIdList(); //保存ID列表
	};

	/**
	 * 开始添加子列表
	 * @param {Boolean} isNotShowCurrent 是否不显示当前添加的编辑区域
	 */
	function startAddSubList(isNotShowCurrent) {
		var currentId = ++maxId; //最大的ID;
		//将当前id保存到ID列表中
		idList.push(currentId);
		saveIdList(); //保存ID列表
		addSubList(currentId);
		if (!isNotShowCurrent) {
			showCurrentEdit(currentId); //显示当前编辑区域
		}
	}

	/**
	 * 保存ID列表
	 */
	function saveIdList() {
		$("#sequenceIds").val(idList.join(","));
	}

	/**
	 * 添加子列表
	 * @param {Number} id 子列表的id值
	 */
	function addSubList(id) {
		var editStr = $("#tpl-edit").html();
		$(editStr).appendTo("#editContainer").attr("data-id", id).addClass("hide");
		//添加左边子图文列表
		var subListStr = $("#tpl-list").html();
		$(subListStr).appendTo("#subList").attr("data-id", id);
		bindEdit(id); //绑定编辑列表对应的操作
	};
	/**
	 * 同步标题
	 * @param {Number} id 子列表的id值
	 */
	function syncTitle(id) {
		var currentTitle = $("#title" + id).val();
		if ($.trim(currentTitle) == "") {
			currentTitle = "&nbsp;";
		}
		getParent(id).find("div[data-id=title]").html(currentTitle);
	};
	/**
	 * 绑定编辑列表对应的操作
	 * @param {Number} id 子列表的id值
	 */
	function bindEdit(id) {
		$("#editContainer").children(".panel[data-id=" + id + "]").find("[data-attr]").each(function(index, element) {
			var ele = $(this);
			$.each($(this).attr("data-attr").split(","), function(index2, value) {
				var attrValue = ele.attr(value); //获取原本的属性值
				ele.attr(value, attrValue + "" + id);
			});
		});
		
		//添加编辑器
		var kItems=[
							'source','fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
							'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
							'insertunorderedlist', '|', 'emoticons', 'image','multiimage', 'link','videoqq','fullscreen'];
		var kConfigOther={
			items :kItems,
			uploadJson: window.kindeditorUpUrl,
			allowFileManager: false,
			height:600
		};
		var editor = KindEditor.create("#contentBody" + id,kConfigOther);
		editorList.push(editor);
		//-------------------------添加事件绑定
		//标题变化时同时更新左边标题
		$("#title" + id).on('valuechange', function(e, previous) {
			syncTitle(id); //同步标题
		});
		//		$("#picurl" + id).ace_file_input({
		//			no_file: '请选择用于上传的图片',
		//			no_icon: "ace-icon fa fa-picture-o",
		//			btn_choose: '选择图片',
		//			btn_change: '选择图片',
		//			allowExt: ["jpeg", "jpg", "png", "gif", "bmp"],
		//			allowMime: ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"],
		//			droppable: false,
		//			onchange: null,
		//			thumbnail: "fit"
		//		});
		//图片地址改变时显示预览图
		//		$("#picurl" + id).on('change', function(e) {
		//			preview(e.target, "#previewImage" + id, getParent(id).find("[data-id=image]"));
		//		});

		$("#picurl" + id).blur(function(e) {
			var url = $(e.target).val();
			if (url)
				showPreviewImage("#previewImage" + id, getParent(id).find("[data-id=image]"), url);
		});

		initImageUploadDialog("#upload" + id + ",#previewImage" + id, "#previewImage" + id, "#picurl" + id, getParent(id).find("[data-id=image]"));

		//点击不同的接口类型切换相应的内容
		//		$("input[name=imageTextType" + id + "]").on("click", function(e) {
		//			$(this).closest(".panel-body").find(".type-content").removeClass("active");
		//			var contentId = $(this).attr("data-id");
		//			$("#" + contentId).addClass("active");
		//		}).each(function(index, element) {
		//			if ($(this).attr("checked") != undefined) {
		//				$(this).prop("checked", true).click();
		//			}
		//		});
		//-------------------------左边编辑和删除
		//编辑
		getParent(id).find("[data-id=edit]").on("click", function(e) {
			General.stopEvent(e);
			showCurrentEdit(id); //显示当前编辑区域
		});
		//删除
		getParent(id).find("[data-id=delete]").on("click", function(e) {
			General.stopEvent(e);
			General.confirm("您确定要删除该子图文吗?", null, deleteSublist, null, id);
		});
	}

	/**
	 * 清除绑定事件
	 * @param {Number} id 子列表的id值
	 */
	function unbindEdit(id) {
			//清除idList中保存的ID
			var index = idList.indexOf(id);
			idList.splice(index, 1);
			editorList.splice(index, 1);
			//删除编辑器
			KindEditor.remove("#contentBody" + id);
			$("#title" + id).off();
			//图片地址改变时显示预览图
			$("#picurl" + id).off();
			//点击不同的接口类型切换相应的内容
//			$("input[name=imageTextType" + id + "]").off();
			//-------------------------左边编辑和删除
			//编辑
			getParent(id).find("[data-id=edit]").off();
			//删除
			getParent(id).find("[data-id=delete]").off();
		}
		/**
		 * 删除该子图文
		 * @param {Number} id 子列表的id值
		 */

	function deleteSublist(id) {
		//清除绑定事件
		unbindEdit(id);
		//删除内容
		getParent(id).remove();
		$("#editContainer").children(".panel[data-id=" + id + "]").remove();
		//判断是否当前编辑区域
		if (currentEditId == id) {
			//显示主图文作为编辑区域
			showCurrentEdit(0); //显示当前编辑区域
		}
	}



	/**
	 * 显示当前编辑区域
	 * @param {Number} id 子列表的id值
	 */
	function showCurrentEdit(id) {
		currentEditId = id; //当前编辑区域的ID
		if (id == 0) {
			$("#subList").find(".triangle").addClass("hide");
			$("#mainList").find(".triangle").removeClass("hide");
		} else {
			$("#subList").find(".triangle").addClass("hide");
			getParent(id).find(".triangle").removeClass("hide");
			$("#mainList").find(".triangle").addClass("hide");
		}
		$("#editContainer").children(".panel").each(function(index, element) {
			if ($(this).attr("data-id") == id) {
				$(this).removeClass("hide");
			} else {
				$(this).addClass("hide");
			}
		});
	}

	//图片上传预览
	function preview(file, previewId, previewId2) {
		if (file.files && file.files[0]) {
			var img = $(previewId)[0];
			var img2 = $(previewId2)[0];
			img.onload = function() {}
			var reader = new FileReader();
			reader.onload = function(evt) {
				img.src = evt.target.result;
				img2.src = evt.target.result;
			}
			reader.readAsDataURL(file.files[0]);
		}
	};

	/**
	 * 获取父容器
	 * @param {Number} id 子列表的id值
	 */
	function getParent(id) {
		if (id == 0) {
			return $("#mainList");
		} else {
			return $("#subList").children("li[data-id=" + id + "]");
			//			return $("#subList").children("li:eq(" + (id-1) + ")");
		}
	}
});